<template>
  <div id="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="sort.title" placeholder="分类名称"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="sort.number" placeholder="编号"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
        <el-button type="primary" @click="handleAdd">添加分类</el-button>
    </el-form>

      <el-table ref="multipleTable" :data="dataList" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="title" label="分类名称" width="200">
        </el-table-column>
        <el-table-column prop="number" label="编号" width="200" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="status" label="状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.status==0">开启</span>
            <span v-if="scope.row.status==1">关闭</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row.id)">修改</el-button>
            <el-button type="text" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection([dataList[1], dataList[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
        <el-button @click="deleteAll()">删除所选</el-button>
      </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <div class="add-form">
      <el-dialog title="新增分类" :visible.sync="saveBtnDisabled">
        <el-form ref="form" :model="sortAdd" label-width="80px">
          <el-form-item label="分类名称">
            <el-input v-model="sortAdd.title"></el-input>
          </el-form-item>
          <el-form-item label="分类编号">
            <el-input v-model="sortAdd.number"></el-input>
          </el-form-item>
          <el-form-item label="状态">
<!--            <el-radio-group v-model="sortAdd.status">-->
<!--              <el-radio :label="0">开启</el-radio>-->
<!--              <el-radio :label="1">关闭</el-radio>-->
<!--            </el-radio-group>-->
            <el-radio v-model="sortAdd.status" label="0">开启</el-radio>
            <el-radio v-model="sortAdd.status" label="1">关闭</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">添加</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>

</template>

<script>
  import sort from "../../api/sort";
  import goods from "../../api/goods";
    export default {
      data() {
        return {
          dataList: [],
          multipleSelection: [],
          total:100,
          currentPage: 1,
          pageSize: 3,
          sort:{},
          sortAdd:{},
          saveBtnDisabled:false

        }
      },
      created() {
        this.getList();
      },
      methods: {
        getList(row){
          if(row==-1){
            this.currentPage=1;
          }
          sort.getList(this.currentPage,this.pageSize,this.sort).then(res=>{
            if (res.data.data.length==0){
              this.currentPage=this.currentPage-1;
              this.getList()
            }else {
              this.dataList = res.data.data
              this.total = res.data.total
            }
          })
        },

        resetData(){
          this.sort={};
        },
        handleDelete(id){
          this.$confirm("是否确定删除数据？,删除之后分类下所有商品将被删除", "提示", {type: 'warning'})
            .then(() => {
              sort.delete(id).then(res=>{
                this.$message.success(res.message);
                this.getList();
              })
            })
            .catch(() => {
              // 表示点击了取消
              this.$message.info("取消删除操作");
            });
        },
        handleSubmit(){
          if(this.sortAdd.id){
            sort.update(this.sortAdd).then(res=>{
              this.$message.success(res.message);
              this.getList();
              this.saveBtnDisabled=false;
            })
          }else {
            sort.add(this.sortAdd).then(res=>{
              this.$message.success(res.message);
              this.getList();
              this.saveBtnDisabled=false;
            })
          }
        },
        handleEdit(row){
          this.saveBtnDisabled=true;
          this.sort={};
          this.sortAdd={};
          sort.getById(row).then(res=>{
              this.sortAdd = res.data
            console.log(this.sortAdd)
            })
        },
        handleAdd(){
          this.saveBtnDisabled=true;
          this.sort={};
          this.sortAdd={};
        },
        deleteAll(row){
          this.$confirm("是否确定删除数据？,删除之后分类下所有商品将被删除", "提示", {type: 'warning'})
            .then(() => {
              this.multipleSelection.forEach(row=>{
                sort.delete(row.id).then(res=>{
                  this.$message.success(res.message)
                  this.getList()
                })
              })
            })
            .catch(() => {
              // 表示点击了取消
              this.$message.info("取消删除操作");
            });
        },
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        handleSizeChange(pageSize){
          this.pageSize=pageSize
          this.getList();
        },
        handleCurrentChange(currentPage){
          this.currentPage=currentPage;
          this.getList();
        }
      }
    }
</script>
